<template>
  <div class="parent">
    <div style="width: 80px"><px-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</px-checkbox></div>
    <px-checkbox-group v-model="checkedCities">
      <px-row v-if="SpcAnalysis.length > 0" :gutter="16" style="margin: 0">
        <px-col v-for="(item, index) in SpcAnalysis" :key="index" class="numList" :span="chartnum" style="margin-bottom: 16px">
          <div class="waterdom borderRidus boxShadow">
            <modelTitle :title="item.indicatorName" />
            <px-checkbox class="checkdiv" :label="item.jobId" @change="emitcheckedCities" />
            <div class="model_chart">
              <unfolodechartDom2
                :activeCharts="activeCharts"
                :chartnum="chartnum"
                :chartvlue="item"
                :width="'100%'"
                :height="'420px'"
                @click="emitgetspcdetail(item.jobId)"
              />
            </div>
            <div class="spcshrtavalue">
              <px-row :gutter="5">
                <px-col :span="5">
                  <div class="numListDiv">
                    <div class="numListDivnum">最大值：</div>
                    <div class="numListDivnum txright">{{ item.maxValue != null ? item.maxValue : "-" }}</div>
                  </div>
                </px-col>
                <px-col :span="5"
                  ><div class="numListDiv">
                    <div class="numListDivnum">平均值：</div>
                    <div class="numListDivnum txright">{{ item.avgValue != null ? item.avgValue : "-" }}</div>
                  </div></px-col
                >
                <px-col :span="5"
                  ><div class="numListDiv">
                    <div class="numListDivnum">最小值：</div>
                    <div class="numListDivnum txright">{{ item.minValue != null ? item.minValue : "-" }}</div>
                  </div></px-col
                >
                <px-col :span="5"
                  ><div class="numListDiv">
                    <div class="numListDivnum">CP值:</div>
                    <div class="numListDivnum txright">{{ item.cpValue != null ? item.cpValue : "-" }}</div>
                  </div></px-col
                >
                <px-col :span="5">
                  <div class="numListDiv">
                    <div class="numListDivnum">CPK值:</div>
                    <div class="numListDivnum txright">{{ item.cpkValue != null ? item.cpkValue : "-" }}</div>
                  </div></px-col
                >
              </px-row>
            </div>
          </div>
        </px-col>
      </px-row>
      <div v-else>
        <px-empty :image-size="50" />
      </div>
    </px-checkbox-group>
    <!-- <echartsDom v-if="SpcAnalysis.length > 0" style="float: left; width: 90%" :width="width" :height="height" :option="option" /> -->
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch, defineEmits } from "vue";
import unfolodechartDom2 from "./unfolodechartDom2.vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
const checkedCities = ref([]);
const props = defineProps({
  SpcAnalysis: {
    type: Object,
    required: true
  },
  tableJobidList: {
    type: Object,
    required: true
  },
  activeCharts: {
    type: String,
    default: ""
  },
  chartnum: {
    type: Number,
    default: 12
  }
});
const checkAll = ref(false);
const isIndeterminate = ref(false);
const handleCheckAllChange = (val: boolean) => {
  // console.log(props.tableJobidList);
  // console.log(props.SpcAnalysis);
  // console.log(checkedCities.value);
  checkedCities.value = val ? props.tableJobidList : [];
  isIndeterminate.value = false;
  emit("tocheckedCities", checkedCities.value);
};
const emit = defineEmits(["tocheckedCities", "getspcdetail"]);
const emitcheckedCities = () => {
  emit("tocheckedCities", checkedCities.value);
};
const emitgetspcdetail = val => {
  emit("getspcdetail", val);
};
</script>

<style scoped lang="scss">
.spcshrtavalue {
  width: 100%;
  height: 46px;
}

.parent {
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.waterdom {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  background-color: #fff;
  border-radius: 4px;
}

.boxShadow {
  position: relative;
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.numList {
  float: left;
  width: 10%;
  height: 100%;
  margin-top: 2px;

  .numListDiv {
    width: 100%;
    height: 46px;
    padding-left: 5px;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 23px;
    background: #eff6ff;

    .numListDivnum {
      width: 100%;
      height: 20px;
      text-align: left;
    }

    .txright {
      width: 100%;
    }
  }
}

.heighttwo {
  height: 46px !important;
}

.color2 {
  color: #a6a6a6 !important;
}

:deep(.px-col-5) {
  flex: 0 0 20%;
  max-width: 20%;
}

.numListDiv {
  width: 100%;
  height: 23px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 23px;
  background: #eff6ff;

  .numListDivnum {
    float: left;
    width: calc(50% - 4px);
    height: 20px;
  }

  .txright {
    text-align: right;
  }
}

.checkdiv {
  position: absolute;
  top: 15px;
  right: 28px;
  width: 19px;
  overflow: hidden;
}
</style>
